<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item, idx) in menu" :key="idx" @mouseenter="enter" @click="searchByCate(item.name)">
        <i :class="item.type" class="iconfont" />{{ item.name
        }}<span class="arrow" />
      </dd>
    </dl>
    <div v-if="kind" class="detail" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item, idx) in curdetail.child">
        <h4 :key="idx">{{ item.title }}</h4>
        <span v-for="v in item.child" :key="v" @click="searchByCate(v)">{{ v }}</span>
      </template>
    </div>
  </div>
</template>

<script>
import { fetchTreeList } from "@/api/product";
export default {
  data() {
    return {
      kind: "",
      menu: []
    };
  },
  created() {
    this.getList();
  },
  watch: {
    $route(route) {
      this.getList();
    }
  },
  computed: {
    curdetail: function() {
      return this.menu.filter(item => item.type === this.kind)[0];
    }
  },
  methods: {
    getList() {
      fetchTreeList().then(response => {
        this.menu = response.data;
      });
    },
    mouseleave: function() {
      let self = this;
      self._timer = setTimeout(function() {
        self.kind = "";
      }, 150);
    },
    searchByCate: function(name) {
      console.log(name);
      this.$router.push({
        path: "/products",
        query: {
          keyword: name
        }
      });
    },
    enter: function(e) {
      this.kind = e.target.querySelector("i").className.split(" ")[1]; //根据分类类型打开子分类
    },
    sover: function() {
      clearTimeout(this._timer);
    },
    sout: function() {
      this.kind = "";
    }
  }
};
</script>

<style lang="css">
@import "@/assets/css/font/iconfont.css";
</style>
